<!-- Site Setting Panel -->
  <section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<!-- Page Header Start -->
<div class="pageheader">
  <h2><i class="fa fa-envelope"></i> Inbox </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="index.html"> Home </a> </li>
      <li class="active"> Inbox </li>
    </ol>
  </div>
</div>
<!-- Page Header End -->

<div class="page">
    <div class="row">
        <div class="col-xs-12 col-md-3 col-lg-2">
            <section class="mail-categories">
                <div class="blockbtn">
                    <a href="#/mail/compose" class="btn btn-danger btn-md btn-block"> <i class="fa fa-edit"></i> COMPOSE</a>
                </div>
                <ul class="list-group">
                    <li class="list-group-item"><a href="javascript:;">
                        <i class="fa fa-inbox"></i>Inbox
                        <span class="label label-info pull-right">6</span>
                    </a></li>
                    <li class="list-group-item"><a href="javascript:;">
                        <i class="fa fa-envelope-o"></i>Send mail
                    </a></li>
                    <li class="list-group-item"><a href="javascript:;">
                        <i class="fa fa-star"></i>Starred
                        <span class="label label-danger pull-right">3</span>
                    </a></li>
                    <li class="list-group-item"><a href="javascript:;">
                        <i class="fa fa-comment-o"></i>Chat
                        <span class="label label-success pull-right">9</span>
                    </a></li>
                    <li class="list-group-item"><a href="javascript:;">
                        <i class="fa fa-pencil"></i>Draft
                        <span class="label label-warning pull-right">1</span>
                    </a></li>
                    <li class="list-group-item"><a href="javascript:;">
                        <i class="fa fa-trash-o"></i>Spam
                    </a></li>
                </ul>
            </section>

            <section class="mail-categories">
                <ul class="list-group">
                    <li class="list-group-item"><a href="javascript:;">
                        Work <i class="fa fa-circle color-danger pull-right"></i>
                    </a></li>
                    <li class="list-group-item"><a href="javascript:;">
                        Friends <i class="fa fa-circle color-info pull-right"></i>
                    </a></li>
                    <li class="list-group-item"><a href="javascript:;">
                        Family <i class="fa fa-circle color-primary pull-right"></i>
                    </a></li>
                    <li class="list-group-item"><a href="javascript:;">
                        Private <i class="fa fa-circle color-warning pull-right"></i>
                    </a></li>
                    <li class="list-group-item"><a href="javascript:;">
                        Classmates <i class="fa fa-circle color-success pull-right"></i>
                    </a></li>
                </ul>
            </section>
        <div class="panel">
          <header class="panel-heading"> <i class="fa fa-users ph-5"></i>
          Online Friends
          </header>
          <div class="panel-body">
             <ul class="list-inline">
                     <li class="pad-5"><div class="avatar"><img src="images/photos/user1.png" alt="" class="img40_40"><i class="on bottom text-white"></i></div></li>
                     <li class="pad-5"><div class="avatar"><img src="images/photos/user2.png" alt="" class="img40_40"><i class="busy bottom text-white"></i></div></li>
                     <li class="pad-5"><div class="avatar"><img src="images/photos/user3.png" alt="" class="img40_40"><i class="on bottom text-white"></i></div></li>
                     <li class="pad-5"><div class="avatar"><img src="images/photos/user4.png" alt="" class="img40_40"><i class="on bottom text-white"></i></div></li>
                     <li class="pad-5"><div class="avatar"><img src="images/photos/user6.png" alt="" class="img40_40"><i class="on bottom text-white"></i></div></li>
                     <li class="pad-5"><div class="avatar"><img src="images/photos/user7.png" alt="" class="img40_40"><i class="busy bottom text-white"></i></div></li>
             </ul>
          </div>
        </div>

        </div>
        <div class="col-xs-12 col-md-9 col-lg-10">
            <section class="panel panel-default mail-container">
                <div class="mail-options">
                  <div class="btn-toolbar">
                    <div class="btn-group">
                       <button class="btn btn-sm btn-default" type="button"><i class="fa fa-mail-reply"></i></button>
                    </div>	
                    <div class="btn-group">
                       <button class="btn btn-sm btn-default" type="button"><i class="fa fa-refresh"></i></button>
                    </div>
                    <div class="btn-group">
                       <button class="btn btn-sm btn-default" type="button"><i class="fa fa-archive"></i></button>
                     <button class="btn btn-sm btn-default" type="button"><i class="fa fa-ban"></i></button>
                     <button class="btn btn-sm btn-default" type="button"><i class="fa fa-trash-o"></i></button>
                    </div>
                   <div class="btn-group" dropdown is-open="status.isopen1">
                     <button class="btn btn-sm btn-default dropdown-toggle" type="button" dropdown-toggle> <i class="fa fa-folder-open"></i> <span class="caret"></span> </button>
                       <ul class="dropdown-menu" role="menu">
                          <li><a href="javascript:;"> <i class="fa fa-folder"></i> Conference</a></li>
                          <li><a href="javascript:;"><i class="fa fa-folder"></i> Newsletters</a></li>
                          <li><a href="javascript:;"><i class="fa fa-folder"></i> Invitations</a></li>
                          <li><a href="javascript:;"><i class="fa fa-folder"></i> Promotions</a></li>
                       </ul>
                   </div>
                   <div class="btn-group" dropdown is-open="status.isopen2">
                     <button class="btn btn-sm btn-default dropdown-toggle" type="button" dropdown-toggle> <i class="fa fa-tags"></i> <span class="caret"></span> </button>
                       <ul class="dropdown-menu" role="menu">
                          <li><a href="javascript:;"> <i class="fa fa-tags"></i> Label 1</a></li>
                          <li><a href="javascript:;"><i class="fa fa-tags"></i> Label 2</a></li>
                          <li><a href="javascript:;"><i class="fa fa-tags"></i> Label 3</a></li>
                          <li><a href="javascript:;"><i class="fa fa-tags"></i> Label 4</a></li>
                       </ul>
                   </div>
                   <div class="btn-group" dropdown is-open="status.isopen3">
                     <button class="btn btn-sm btn-default dropdown-toggle" type="button" dropdown-toggle> More <span class="caret"></span> </button>
                       <ul class="dropdown-menu" role="menu">
                          <li><a href="javascript:;"> Mark as Read </a></li>
                          <li><a href="javascript:;"> Mark as Unread </a></li>
                          <li><a href="javascript:;"> Add to Tasks</a></li>
                          <li><a href="javascript:;"> Add Star</a></li>
                          <li><a href="javascript:;"> Create Event</a></li>
                          <li><a href="javascript:;"> Filter Messages</a></li>
                          <li><a href="javascript:;"> Mute </a></li>
                       </ul>
                   </div>
                   <div class="btn-group pull-right">
                     <button class="btn btn-sm btn-default" type="button"><i class="fa fa-chevron-left"></i></button>
                     <button class="btn btn-sm btn-default" type="button"><i class="fa fa-chevron-right"></i></button>
                   </div>
                    <h6 class="pull-right"> Showing 1 - 15 of 2368 </h6>
                  </div>

                </div>
                <div class="panel-body" data-ng-controller="TabsDemoCtrl">
                   <tabset> 
                      <tab heading="Primary">

                <table class="table table-hover table-responsive" ng-controller="starrating">
                    <tr class="mail-unread">
                        <td width="3%"><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs" width="4%"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs" width="12%"><span class="label label-success"> Primary </span></td>
                        <td width="15%">Jane Swift </td>
                        <td>Nice to meet you</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>3/11/14 2:30 PM</td>
                    </tr>

                    <tr class="mail-unread">
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Gmail</td>
                        <td>Please confirm your registeration</td>
                        <td class="hidden-xs"> </td>
                        <td>2/19/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>John Smith </td>
                        <td>Lorem ipsum dolor sit amet</td>
                        <td class="hidden-xs"> </td>
                        <td>2/15/14 5:00 AM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" checked><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>no-reply</td>
                        <td>Consectetur adipisicing elit.</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>no-reply</td>
                        <td>Ea totam libero dignissimos dicta eos</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr class="mail-hightlight">
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Alex Swift </td>
                        <td>Dolor ut similique</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Emma Bebier </td>
                        <td>Rerum dolore commodi nobis quaerat</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Service</td>
                        <td>abore id dignissimos non minus</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Service</td>
                        <td>Fugit ducimus quidem</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Big ant</td>
                        <td>Laboriosam, minima totam</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Tyler Doe </td>
                        <td>Laborum consequatur quae</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Small Tomato</td>
                        <td>Nemo aliquid</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Service</td>
                        <td>Laudantium rerum ab similique aliquam</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Private </td>
                        <td>Voluptatum reprehenderit</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Big ant</td>
                        <td>Deleniti veniam aperiam</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Service</td>
                        <td>Facere ullam totam!</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Private </td>
                        <td>Fugit ducimus quidem</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Small Tomato</td>
                        <td>Laboriosam, minima totam</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><span class="fa fa-star-o"></span></div> </td>
                        <td class="hidden-xs"><span class="label label-success"> Primary </span></td>
                        <td>Tyler Doe </td>
                        <td>Aborum consequatur quae</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>

                </table>
                      </tab> 
                      <tab heading="Social">

                <table class="table table-hover table-responsive" ng-controller="starrating">
                    <tr class="mail-unread">
                        <td width="3%"><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs" width="4%"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs" width="12%"><span class="label label-info"> Social </span></td>
                        <td class="15%">Gmail</td>
                        <td>Please confirm your registeration</td>
                        <td class="hidden-xs"> </td>
                        <td>2/19/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-info"> Social </span></td>
                        <td>Tyler Doe </td>
                        <td>Laborum consequatur quae</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-info"> Social </span></td>
                        <td>Small Tomato</td>
                        <td>Nemo aliquid</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-info"> Social </span></td>
                        <td>Service</td>
                        <td>Laudantium rerum ab similique aliquam</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-info"> Social </span></td>
                        <td>Private </td>
                        <td>Voluptatum reprehenderit</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-info"> Social </span></td>
                        <td>Big ant</td>
                        <td>Deleniti veniam aperiam</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-info"> Social </span></td>
                        <td>Service</td>
                        <td>Facere ullam totam!</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-info"> Social </span></td>
                        <td>Private </td>
                        <td>Fugit ducimus quidem</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-info"> Social </span></td>
                        <td>Small Tomato</td>
                        <td>Laboriosam, minima totam</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-info"> Social </span></td>
                        <td>Tyler Doe </td>
                        <td>Aborum consequatur quae</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>

                </table>
                      </tab> 
                      <tab heading="Promotions">

                <table class="table table-hover table-responsive" ng-controller="starrating">
                    <tr class="mail-unread">
                        <td width="3%"><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs" width="4%"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs" width="12%"><span class="label label-warning"> promotions </span></td>
                        <td width="15%">Jane Swift </td>
                        <td>Nice to meet you</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>3/11/14 2:30 PM</td>
                    </tr>

                    <tr class="mail-unread">
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-warning"> promotions </span></td>
                        <td>Gmail</td>
                        <td>Please confirm your registeration</td>
                        <td class="hidden-xs"> </td>
                        <td>2/19/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-warning"> promotions </span></td>
                        <td>Big ant</td>
                        <td>Laboriosam, minima totam</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-warning"> promotions </span></td>
                        <td>Tyler Doe </td>
                        <td>Laborum consequatur quae</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-warning"> promotions </span></td>
                        <td>Private </td>
                        <td>Fugit ducimus quidem</td>
                        <td class="hidden-xs"> </td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-warning"> promotions </span></td>
                        <td>Small Tomato</td>
                        <td>Laboriosam, minima totam</td>
                        <td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td class="hidden-xs"> <div class="inbox-star" ng-click="toggleClass($event, 'starred')"><i class="fa fa-star-o"></i></div> </td>
                        <td class="hidden-xs"><span class="label label-warning"> promotions </span></td>
                        <td>Tyler Doe </td>
                        <td>Aborum consequatur quae</td>
                        <td class="hidden-xs"></td>
                        <td>2/11/14 2:00 PM</td>
                    </tr>

                </table>

                      </tab> 
                      <tab> <tab-heading> <i class="fa fa-plus"></i> </tab-heading>
                           Add New Mail Tab Here.. Pretty cool! 
                      </tab> 
                   </tabset>
                </div>
            </section>
        </div>
    </div>
</div>